<template>
  <el-dialog title="咨询工单列表" :visible.sync="visible" width="1200px" @close="onClose" append-to-body>
    <XmTable :config="tableConfig" :noWatchParams="noWatchParams" class="table" ref="table">
      <div slot="filter">
        <el-form class="fr" :inline="true" ref="form">
          <el-form-item>
            <el-button type="primary" @click="search" size="small" style="margin-left: 10px;">刷新
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <template slot="column-complaintLevelName" slot-scope="{data}">
        <el-tag class="mr-5 mb-5" :type="getcomplaintLevelClass(data.complaintLevel)">
          {{data.complaintLevelName}}
        </el-tag>
      </template>
      <template slot="column-extJson" slot-scope="{data}">
        <div >
          <imageView :src="item" v-for="(item,index) in changeExtJsoncomplaint(data.extJson)" :key="index"
            class="w-80 h-80 mt-10" />
        </div>
      </template>
      <template slot="column-reminder" slot-scope="{data}">
        <div v-if="data.reminder">
          <el-tag class="mr-5 mb-5" type="danger">
            催办
          </el-tag>
        </div>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button type="text" size="mini" @click="approval(data)">
          处理
        </el-button>
        <el-button type="text" size="mini" @click="viewOrder(data)">查看订单</el-button>
        <el-button type="text" size="mini" @click="showLog(data)">查看日志</el-button>
      </template>
    </XmTable>
    <handleDialog ref="handleDialog" @fetch="fetch"></handleDialog>
    <orderLogDialog ref="orderLogDialog" :config="{contentKey: 'content'}"></orderLogDialog>
  </el-dialog>
</template>

<script>
import {
  tableConfig, // 订单日志
} from './config'
import orderLogDialog from '@/components/dialog/orderLogDialog'
import handleDialog from './handleDialog'
import { workAskLogList } from '@/api/workorder/consultHappy'
import imageView from '@/components/image/imageView'

export default {
  components: {
    orderLogDialog,
    handleDialog,
    imageView,
  },
  data() {
    const cityId = JSON.parse(localStorage.getItem('saber-areaId'))['content']
    return {
      tableConfig,
      visible: false,
      tableData: [],
      noWatchParams: {
        cityId,
        disposeState: 0
      }
    };
  },
  methods: {
    async show() {
      this.visible = true
      this.$nextTick(() => {
        this.fetch()
      })
    },
    hide() {
      this.visible = false
    },
    approval(data) {
      this.$refs.handleDialog.show({data})
    },
    fetch() {
      this.$refs.table && this.$refs.table.fetch()
    },
    search() {
      this.fetch()
    },
    onClose() {
      this.$emit('close')
    },
    showLog(data) {
      this.$refs.orderLogDialog.visible = true
      workAskLogList({
        workAskId: data.id,
        type: 1
      }).then(res => {
        const logList = res.data.data || []
        this.$refs.orderLogDialog.showByLogList({logList})
      })
    },
    viewOrder(data) {
      let newUrl = this.$router.resolve({
        path: "/viewOrdInfor",
        query: {
          id: data.orderId,
        },
      });
      window.open(newUrl.href, `viewOrdInfor_${data.orderId}`);
    },
    getcomplaintLevelClass (complaintLevel) {
      if (complaintLevel > 3) {
        return 'danger'
      }
      if (complaintLevel > 2) {
        return 'warning'
      }
      return 'info'
    },
    changeExtJsoncomplaint(list) {
      let imgList = []
      try {
        imgList = JSON.parse(list).img
      } catch (error) {
        console.error(error)
        imgList = []
      }
      return imgList
    },
  },
  created() {
  }
};
</script>
<style lang="scss" scoped>
</style>